<template>
	<view class="notice flex_s">
		<view class="icon_box">
			<!-- <image src="@/static/img/notice_icon.png" mode="aspectFill"></image> -->
			<u-icon name="volume-fill" color="#CF2F23" size="12"></u-icon>
		</view>
		<swiper class="swiper_box" :vertical="true" circular autoplay :interval="2000">
			<swiper-item v-for="(item,index) in noticeList" :key="index">
				<view class="notice_item flex_s r1">
					恭喜<text>{{item.name}}</text>獲得 <text class="price">{{item.gift}}</text>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		name: "notice",
		props: {
			noticeList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.notice {

		width: 100%;
		height: 100%;
		line-height: 55rpx;
		overflow: hidden;
		padding: 0 24rpx;
		background: linear-gradient(90deg, rgba(253, 236, 226, 0.3) 0%, rgba(207, 47, 35, 0.3) 45.83%, rgba(253, 236, 226, 0.3) 100%);
		.icon_box {
			flex-shrink: 0;
			width: 24rpx;
			height: 24rpx;
			line-height: 0;
			margin-right: 8rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.swiper_box {
			width: 100%;
			height: 100%;


			.notice_item {
				font-size: 22rpx;
				color: #00449B;

				.price {
					color: #D43030;
				}
			}
		}

		.text_box {
			margin-left: 10rpx;
		}
	}
</style>